<template>
  <div class="common-container" style="height: 100%">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
      <el-tab-pane label="控制面板" name="panel" style="height: 100%">
        <Panel ref="rePanel" :deviceInfo="deviceInfo" />
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="base" style="height: 100%">
        <Base ref="reBase" :deviceInfo="deviceInfo" />
      </el-tab-pane>
      <el-tab-pane label="探测器" name="device" style="height: 100%">
        <Device ref="refDevice" :deviceInfo="deviceInfo" />
      </el-tab-pane>
      <el-tab-pane label="告警信息" name="alarm" style="height: 100%">
        <Alarm ref="refAlarm" :deviceInfo="deviceInfo" />
      </el-tab-pane>
      <el-tab-pane label="业主" name="person" style="height: 100%">
        <OwnerList ref="refPerson" :deviceInfo="deviceInfo" />
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="instruct" style="height: 100%">
        <InstructRecord ref="refInstruct" :deviceInfo="deviceInfo" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {} from "@/api/api";
import Device from "./components/Device.vue";
import Base from "./components/Base.vue";
import Panel from "./components/panel/Panel.vue";
import InstructRecord from "./components/InstructRecord.vue";
import Alarm from "./components/Alarm.vue";
import OwnerList from "@/components/DeviceInfo/components/ownerList.vue";
import { mapState } from "vuex";

export default {
  name: "host",
  components: {
    Device,
    Base,
    Alarm,
    OwnerList,
    InstructRecord,
    Panel,
  },
  mixins: [],
  provide() {
    return {
      deviceInfo: this.deviceInfo,
    };
  },
  data() {
    return {
      activeName: "panel",
      deviceInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // console.log(" this.user.deviceInfo,index", this.user.deviceInfo);
    this.deviceInfo = this.user.deviceInfo;
    this.$nextTick(() => {
      this.$refs.rePanel.getDetectorDxtend();
      this.$refs.rePanel.getKeyCommandList();
      this.$refs.refDevice.getInit();
    });
  },

  created() {},
  async activated() {
    this.deviceInfo = this.user.deviceInfo;
    this.$nextTick(() => {
      this.$refs.rePanel.getDetectorDxtend();
      this.$refs.rePanel.getKeyCommandList();
      this.$refs.refDevice.getInit();
    });
  },
  watch: {
    "deviceInfo.imei"(val, oldVal) {
      this.activeName = "panel";
    },
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.paneName);
      if (tab.paneName === "alarm") {
        this.$refs.refAlarm.AlarmList();
      } else if (tab.paneName === "person") {
        this.$refs.refPerson.getDeviceUsergetByImei();
      } else if (tab.paneName === "instruct") {
        this.$refs.refInstruct.getInitDataList();
      } else if (tab.paneName === "panel") {
        this.$refs.rePanel.getDetectorDxtend();
        this.$refs.rePanel.getKeyCommandList();
      } else if (tab.paneName === "base") {
        this.$refs.reBase.getDetectorDxtend();
      }
    },
  },
};
</script>

<style scoped lang="less">
.common-container {
  color: @primaryThemeTxtColor4;
  background: @primaryHeaderBgcolor;
  padding: 0 0;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    // align-items: center;
  }
  .left,
  .right {
    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #7367f0;
    }
    .item {
      word-break: break-all;
      padding-left: 5px;
      margin-bottom: 20px;
      display: flex;
      .label {
        white-space: nowrap;
        color: @primaryFFFColor6;
      }
    }
  }
}

::v-deep .el-dialog__header {
  text-align: center;
}

// 导航栏颜色
::v-deep .el-tabs__item {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-tabs__active-bar {
  background-color: #7367f0;
}

::v-deep .el-tabs__item.is-active {
  color: #7367f0;
}

// 导航栏线条颜色
::v-deep .el-tabs__nav-wrap::after {
  background: @primaryBgcolor5;
}

::v-deep .el-tabs__nav {
  padding: 5px 20px;
}

::v-deep .el-tabs__active-bar {
  padding: 0px 20px;
  // width: 100% !important;
}
::v-deep .el-tabs__content {
  //   min-height: 560px;
  height: calc(100% - 70px);
}
</style>
